@extends('layouts.admin.head')
@section('title')
    新闻数据
@endsection
@section('headStyle')
    <!-- DataTables -->
    <link rel="stylesheet" href="{{asset('css/toastr.min.css')}}">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css">
    <style type="text/css">
        .font_whdth_150{
            width: 150px;
        }
        .font_whdth_600{
             width: 600px;
         }
        .user_img{
            width: 56px;
            height: 56px;
            border-radius: 56px;
        }
    </style>
@endsection
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            段子数据
            <small>全部  段子</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i>管理平台</a></li>
            <li><a href="#">数据中心</a></li>
            <li class="active">新闻数据</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box">
                    <div class="box-header">
                        <div class="box-footer">
                            <button  type="button" id="pullData" class="btn  btn-info">开始采集数据</button>
                            <button  type="button" id="stopData" class="btn  btn-info">停止采集数据</button>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <table id="data" class="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>头像</th>
                                <th>作者</th>
                                <th>内容</th>
                                <th>数据时间</th>
                                <th>赞</th>
                                <th>收藏</th>
                                <th>留言</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                                @foreach($news as $item)
                                    <tr>
                                        <td>{{$item['id']}}</td>
                                        <td><img  class="user_img" src="{{$item['avatar']}}"></td>
                                        <td class="font_whdth_150">{{$item['username']}}</td>
                                        <td id="{{$item['id']}}" class="font_whdth_600">{{$item['content']}}</td>
                                        <td>{{$item['data_date']}}</td>
                                        <td>{{$item['praise']}}</td>
                                        <td>{{$item['collect']}}</td>
                                        <td>{{$item['comment']}}</td>
                                        <td>{{$item['created_at']}}</td>
                                        <td>
                                            <button  type='button' alt="{{$item['id']}}" class='btn btn-primary' data-toggle="modal" data-target="#primaryModal">
                                                <i class='fa fa-edit'></i>
                                            </button>
                                            <button type='button' alt="{{$item['id']}}" class='delrow btn btn-primary' >
                                                <i class='fa fa-trash-o'></i>
                                            </button>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                    {{--<div id="data_body">--}}
                        {{--<div data-bind="foreach:items">--}}
                            {{--<div data-bind="text:(function(){debugger})()" ></div>--}}
                            {{--<span data-bind="text:id"></span>--}}
                        {{--</div>--}}
                        {{--<span data-bind="text:test"></span>--}}
                    {{--</div>--}}
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- Modal -->
    @include('admin.new.edit')
    <!-- /Modal -->
@endsection
@section('pageInlineScript')

    {{--弹出提示框--}}
    <script src="{{asset('js/pop-message.js')}}"></script>
    {{--操作提示信息--}}
    <script src="{{asset('js/toastr.min.js')}}"></script>
    <script>
        $(function () {
//            var newsModel = function () {
//                var _self = this;
//                _self.items = ko.observableArray();
//                _self.test = ko.observable('222222');
//                $.ajax({
//                    type:"GET",
//                    async:false,
//                    url:"/admin/new/json",
//                    success: function(data){
//                        var data = eval("(" + data +")");
//                        _self.items = data['news'];
//                        console.log(_self.items)
//                    }
//                });
//            }
//            var news = new newsModel();
//            ko.applyBindings(news, document.getElementById('data_body'));
        })
        var setOutTime;
        /**
         * 开始数据采集
         */
        $('#pullData').click(function () {
            $.ajax({
                type:"GET",
                url:"beginBat",
                data:{
                    type:'duanzi',
                },
                success: function(){
                    WebDataCrawling();
                    $("#pullData").addClass('disabled')
                }
            });
        })
        /**
         * 停止数据采集
         */
        $('#stopData').click(function () {
            clearTimeout(setOutTime);
            $("#pullData").removeClass('disabled')
            $("#pullData").text('开始采集数据');
        })
        /**
         * 数据反复请求
        */
        function WebDataCrawling(){
            $("#pullData").addClass('disabled').text('数据正在抓取中...')
            //一分钟请求一次
            setOutTime = setTimeout(WebDataCrawling,5000);
            $.ajax({
                type:"GET",
                dataType: "json",
                url:"http://www.laravel5.4.app:9999/",
                success: function(data){
                    console.log(data);
                }
            });
        }
        /**
         *模态框初始化加载
         */
        $("#primaryModal").on('show.bs.modal', function (e) {
            var _this = $(e.relatedTarget).parent().siblings();
            $('#news_id').val(_this.eq(0).html());
            $('#username').val(_this.eq(2).html());
            $('#content').val(_this.eq(3).html());
            $('#created_at').val(_this.eq(8).html());
        })
        /**
         *保存修改的数据
         */
        $("#but_save").click(function () {
            var news_id = $("#news_id").val();
            var content = $("#content").val();
            if(news_id!=''){
                $.ajax({
                    type: "post",
                    url:'/admin/new/update',
                    data:{news_id:news_id, content:content},
                    headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                    success: function (data) {
                        console.log(data);
                        if (data.code=='0') {
                            $('#'+news_id).html(content);
                            console.log('更新数据成功!')
                        }else{
                            console.log('更新数据失败!')
                        }
                        $('#primaryModal').modal('hide');
                    },
                    error: function () {
                        console.log('更新数据失败!')
                    }
                });
            }
        })
        /**
         * 软删除数据
         */
        $(".delrow").on('click', function () {
            var new_id = $(this).attr('alt');
            var obj = $(this).parent('td').parent('tr');
            Ewin.confirm({message:"确认要删除选择的数据吗？"}).on(function(e) {
                if (!e) {
                    return;
                }
                $.ajax({
                    type: "delete",
                    url:'/admin/new/'+new_id,
                    headers: {'X-CSRF-TOKEN':'{{csrf_token()}}'},
                    success: function (data) {
                        if (data.code=='0') {
                            obj.remove();
                        }
                    },
                    error: function () {
                        console.log('删除数据失败!');
                    }
                });
            });
        });
    </script>
@endsection